<script lang="ts" setup>
const { text } = defineProps<{ text: string }>()
</script>

<template>
  <div class="pos-wrapper">
    <div class="pos-header">
      <div class="pos-btns">
        <slot></slot>
      </div>
      <p class="pos-text">{{ text }}</p>
    </div>
  </div>
</template>
<style scoped lang="stylus">
@import '../../assets/varibles.styl'
.pos-wrapper
  width 2px
  position absolute
  background-color $primary-color
  pointer-events none
  left 35px
  z-index 9
  .pos-header
      width: 70px;
      height: 42px;
      margin-left: -34px;
      position: relative;
      background: $primary-color;
      color: $text-color;
      border-radius: 2px;
      text-align: center;
      cursor: ew-resize;
      pointer-events: auto;
      &::after
        top: 100%;
        left: 50%;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border: 8px solid transparent;
        border-top-color: $primary-color;
        margin-left: -8px;
  .pos-btns
    display: flex;
    justify-content: space-around
  .pos-text
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: ew-resize;
</style>
